Localization এবং Currency Formatting Techniques

Localization (L10N) এবং Currency Formatting অ্যাপ্লিকেশনে ব্যবহারকারীর ভাষা এবং সংস্কৃতি অনুযায়ী কনটেন্ট প্রদর্শন করার জন্য অত্যন্ত গুরুত্বপূর্ণ। বিশেষত, যখন আপনি একটি আন্তর্জাতিক বাজারে কাজ করেন, তখন Localization এবং Currency Formatting ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং বৈশ্বিক ইউজার বেসের জন্য অ্যাপ্লিকেশনটি আরও উপযোগী করে তোলে।

১. Localization (L10N) in React Native

Localization হল অ্যাপ্লিকেশনের কনটেন্টকে বিভিন্ন ভাষায় অনুবাদ করা এবং প্রতিটি দেশের সংস্কৃতি এবং রীতিনীতির সাথে সামঞ্জস্যপূর্ণ করা। React Native অ্যাপ্লিকেশনে Localization এর জন্য বেশ কিছু জনপ্রিয় প্যাকেজ রয়েছে, যেমন react-i18next এবং react-native-localize।

Localization এর জন্য ব্যবহৃত প্যাকেজ:

• react-i18next: এটি i18next লাইব্রেরির উপর ভিত্তি করে তৈরি এবং React এবং React Native অ্যাপ্লিকেশনগুলিতে শক্তিশালী Localization সাপোর্ট দেয়।
• react-native-localize: এটি মোবাইল ডিভাইসে স্থানীয় ভাষা, অঞ্চল এবং অন্যান্য ডিভাইস সম্পর্কিত তথ্য সংগ্রহ করতে সহায়ক।

১.১ react-i18next Setup:

প্রথমে, আপনাকে react-i18next ইনস্টল করতে হবে:

npm install react-i18next i18next

১.২ React-i18next এর সাথে Localization Example:

import React from 'react';
import { Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

// i18n.js configuration file for languages
import i18n from './i18n';  // Localization setup file

const App = () => {
  const { t } = useTranslation();

  return (
    <View>
      <Text>{t('welcome_message')}</Text>
    </View>
  );
};

export default App;

i18n.js (Localization Setup):

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// Importing language files (e.g., English and Bengali)
import en from './locales/en.json';
import bn from './locales/bn.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    bn: { translation: bn },
  },
  lng: 'en', // Default language
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // React already does escaping
  },
});

export default i18n;

en.json (English Translation File):

{
  "welcome_message": "Welcome to React Native!"
}

bn.json (Bengali Translation File):

{
  "welcome_message": "রিয়েক্ট নেটিভ এ স্বাগতম!"
}

এইভাবে, আপনি react-i18next ব্যবহার করে সহজেই আপনার React Native অ্যাপের Localization সম্পাদন করতে পারেন।

২. Currency Formatting Techniques

Currency Formatting হলো যে প্রক্রিয়ায় ব্যবহারকারী বা দেশের মুদ্রার উপস্থাপনা (যেমন, টাকা, রুপি, ইউএসডি ইত্যাদি) সঠিকভাবে প্রদর্শন করা হয়। বিভিন্ন দেশের মুদ্রার জন্য আলাদা আলাদা সিম্বল এবং ডিজিটাল ফরম্যাট থাকতে পারে, যেমন ইউএস ডলার ($), ভারতীয় রুপি (₹), ইউরো (€), ইত্যাদি।

Currency Formatting এর জন্য ব্যবহৃত প্যাকেজ:

1. Intl.NumberFormat: এটি JavaScript-এর একটি বিল্ট-ইন ইন্টারন্যাশনালাইজেশন API, যা মুদ্রা ফরম্যাট করার জন্য ব্যবহৃত হয়।
2. react-native-localize: এই প্যাকেজটি বিভিন্ন অঞ্চলের জন্য সঠিক ফরম্যাট সরবরাহ করতে পারে।
3. accounting.js: এটি আরও উন্নত ফিচার সহ মুদ্রা ফরম্যাটিং এবং পরিমাণ পরিচালনার জন্য ব্যবহৃত হয়।

২.১ Intl.NumberFormat এর সাথে Currency Formatting Example:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  // Currency formatting using Intl.NumberFormat
  const amount = 123456.78;

  const formattedCurrency = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(amount);

  return (
    <View>
      <Text>{formattedCurrency}</Text>
    </View>
  );
};

export default App;

এই উদাহরণে, Intl.NumberFormat ব্যবহার করে USD মুদ্রার ফরম্যাট করা হয়েছে এবং এটি $123,456.78 হিসাবে প্রদর্শিত হবে।

২.২ Currency Formatting with react-native-localize Example:

react-native-localize ব্যবহার করে আপনি ইউজারের লোকাল অঞ্চলের অনুযায়ী সঠিক মুদ্রার ফরম্যাট পেতে পারেন:

npm install react-native-localize

import React from 'react';
import { Text, View } from 'react-native';
import RNLocalize from 'react-native-localize';

const App = () => {
  const amount = 123456.78;

  // Get the current locale
  const currencyCode = RNLocalize.getCurrencies()[0]; // E.g., 'USD', 'INR'
  const currencySymbol = RNLocalize.getCurrencySymbol(currencyCode);

  const formattedCurrency = new Intl.NumberFormat(RNLocalize.getLocales()[0].languageTag, {
    style: 'currency',
    currency: currencyCode,
  }).format(amount);

  return (
    <View>
      <Text>{`${currencySymbol} ${formattedCurrency}`}</Text>
    </View>
  );
};

export default App;

এখানে, react-native-localize ব্যবহার করে ডিভাইসের লোকাল সিস্টেম থেকে সঠিক মুদ্রা কোড এবং সিম্বল পাওয়া যাচ্ছে এবং সঠিকভাবে ফরম্যাট করা হচ্ছে।

সারাংশ

Localization (L10N) এবং Currency Formatting অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে যখন অ্যাপ্লিকেশনটি আন্তর্জাতিক পর্যায়ে চালু করা হয়। react-i18next এবং react-native-localize এর মতো প্যাকেজগুলি ব্যবহার করে আপনি বিভিন্ন ভাষায় কনটেন্ট স্থানীয়করণ করতে পারেন। এছাড়াও, Intl.NumberFormat এবং react-native-localize ব্যবহার করে আপনি বিভিন্ন দেশের মুদ্রা সঠিকভাবে ফরম্যাট করতে পারবেন, যা ব্যবহারকারীদের জন্য একটি সুন্দর এবং সঠিক অভিজ্ঞতা নিশ্চিত করে।